<template>
  <a-modal
    :visible="visible"
    centered
    destroyOnClose
    title="编辑常用应用"
    :bodyStyle="{ padding: '0 10px' }"
    @cancel="handleCancel"
    @ok="handleOk"
    okText="保存"
    :width="600"
  >
    <a-tabs v-model:activeKey="currentTab">
      <a-tab-pane :key="1" tab="所有应用">
        <section class="content">
          <a-input-search
            v-model:value="appName"
            placeholder="输入应用名称搜索"
            style="width: 100%; margin-bottom: 20px"
            allow-clear
          />
          <a-row :gutter="[0, 24]" v-if="renderAppList.length">
            <a-col :span="24" v-for="app of renderAppList" :key="app.id">
              <div class="app-item">
                <div class="icon-box">
                  <img class="image" v-if="app.app_logo" :src="app.app_logo" />
                  <cu-icon v-else type="org-menu-yingyong"></cu-icon>
                </div>
                <div class="app-name">
                  <div class="name">{{ app.app_name }}</div>
                  <div class="nowrap desc">{{ app.app_info }}</div>
                </div>
                <div class="app-option">
                  <span v-if="tab2Ids.includes(app.id)">已添加</span>
                  <a-button
                    v-else
                    type="primary"
                    ghost
                    size="small"
                    @click="addCollectApp(app)"
                  >
                    添加
                  </a-button>
                </div>
              </div>
            </a-col>
          </a-row>
          <div v-else class="no-data">无结果</div>
        </section>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="常用应用">
        <section class="content">
          <!-- <a-row :gutter="[0, 24]" v-if="tab2List.length">
            <a-col :span="24" v-for="app of tab2List" :key="app.id"> -->
          <a-alert
            message="拖拽左侧图标进行排序。"
            style="margin-bottom: 20px"
          />
          <draggable
            v-if="tab2List.length"
            v-model="tab2List"
            group="collect"
            item-key="id"
            handle=".order-icon"
            @end="dragEnd"
          >
            <template #item="{ element: app }">
              <div class="app-item" style="margin-bottom: 20px">
                <div class="order-icon">
                  <MenuOutlined />
                </div>
                <div class="icon-box">
                  <img class="image" v-if="app.app_logo" :src="app.app_logo" />
                  <cu-icon v-else type="org-menu-yingyong"></cu-icon>
                </div>
                <div class="app-name">
                  <div class="name">{{ app.app_name }}</div>
                  <div class="nowrap desc">{{ app.app_info }}</div>
                </div>
                <a-button
                  type="primary"
                  ghost
                  danger
                  size="small"
                  @click="removeCollectApp(app)"
                >
                  移除
                </a-button>
              </div>
            </template>
          </draggable>

          <!-- </a-col>
          </a-row> -->
          <a-empty v-else description="您还没有添加常用应用哦~">
            <a-button type="primary" @click="currentTab = 1">去添加</a-button>
          </a-empty>
        </section>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { message } from "ant-design-vue";
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import request from "../../../../common/utils/request";
import draggable from "vuedraggable";
import { MenuOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "AddCollectApp",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tab: {
      type: Number,
      default: 1,
    },
    appList: {
      type: Array,
      default: () => [],
    },
    collectList: {
      type: Array,
      default: () => [],
    },
  },
  components: { draggable, MenuOutlined },
  setup(props, { emit }) {
    const state = reactive({
      tabList,
      currentTab: 1,
      tab1List: [],
      tab2List: [],
      tab2Ids: [],
      appName: "",
      hasDraged: false,
    });
    const handleCancel = () => {
      emit("close");
    };
    const handleOk = () => {
      if (state.hasDraged) {
        const result = state.tab2List.map((item, index) => ({
          id: item.id,
          sort: state.tab2List.length - index,
        }));
        request
          .post("/org", "/app/collect/sort", {
            collect_arr: result,
          })
          .then(() => {
            message.success("保存成功！");
            emit("success");
          });
      }
      handleCancel();
    };

    const addCollectApp = (app) => {
      request
        .post("/org", "/app/collect", {
          app_id: app.id,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "添加成功！");
          state.tab2List.unshift(app);
          state.tab2Ids.push(app.id);
          emit("addSuccess");
        });
    };

    const removeCollectApp = (app) => {
      request
        .del("/org", "/app/collect", {
          app_id: app.id,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "移除成功！");
          const idx1 = state.tab2List.findIndex((item) => item.id == app.id);
          state.tab2List.splice(idx1, 1);
          const idx2 = state.tab2Ids.findIndex((item) => item.id == app.id);
          state.tab2Ids.splice(idx2, 1);
          emit("addSuccess");
        });
    };

    const dragEnd = () => {
      state.hasDraged = true;
    };

    const renderAppList = computed(() => {
      let result = state.tab1List;
      if (state.appName) {
        result = state.tab1List.filter(
          (item) => item.app_name.indexOf(state.appName) != -1
        );
      }
      return result;
    });

    watch(
      () => props.visible,
      () => {
        state.tab1List = JSON.parse(JSON.stringify(props.appList));
        state.tab2List = JSON.parse(JSON.stringify(props.collectList));
        state.tab2List.splice(state.tab2List.length - 1, 1);
        state.tab2Ids = state.tab2List.map((item) => item.id);
        state.currentTab = props.tab;
      }
    );

    return {
      renderAppList,
      ...toRefs(state),
      handleCancel,
      handleOk,
      addCollectApp,
      removeCollectApp,
      dragEnd,
    };
  },
});
const tabList = [
  { key: 1, title: "全部应用" },
  { key: 2, title: "常用应用" },
];
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 600px;
  overflow: hidden auto;
  padding: 0 20px 20px 20px;
  .app-item {
    width: 100%;
    display: flex;
    align-items: center;
    .order-icon {
      cursor: all-scroll;
      padding-right: 15px;
    }
    .icon-box {
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: @border-radius-base;
      background: @primary-color;
      color: #fff;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .app-name {
      margin: 0 10px;
      flex: 1;
      overflow: hidden;
      .name {
        color: #333;
        font-weight: 600;
      }
      .desc {
        color: #666;
        font-size: 12px;
      }
    }
    .app-option {
      min-width: 60px;
      max-width: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

:deep(.ant-tabs-nav-wrap) {
  margin-bottom: 16px;
}
</style>
